<template>
	<view>
		<view class="top-bg"></view>
		<view class="content-wrap">
			<view class="form-wrap">
				<view class="form-item yf-flex-left" v-if="types==0">
					<view class="form-label">
						外出人员姓名：
					</view>
					<view class="uni-input">{{formData.userName}}</view>
				</view>
				<view class="form-item yf-flex-left">
					<view class="form-label">
						开始时间：
					</view>
					<view class="uni-input">{{formData.startTime||""}}</view>
				</view>
				<view class="form-item yf-flex-left">
					<view class="form-label">
						结束时间：
					</view>
					<view class="uni-input">{{formData.endTime||""}}</view>
				</view>
				<view class="form-item yf-flex">
					<view class="form-label" style="padding-top: 20rpx;">
						外出事由：
					</view>
					<view class="uni-input" style="padding: 20rpx 0;">
						{{formData.desc||""}}
					</view>
				</view>
				<view class="form-item yf-flex" v-if="formData.img">
					<view class="form-label" style="padding-top: 20rpx;">
						图片：
					</view>
					<view class="uni-input" style="padding: 20rpx 0;">
						<image :src="`${formData.img?imagePath+formData.img:''}`" mode="aspectFill" class="uploadImg" @click="bindImg" v-if="formData.img">
						</image>
					</view>
				</view>
				<view class="form-item yf-flex-left">
					<view class="form-label">
						部门:
					</view>
					<view class="uni-input">
						{{formData.deptName||""}}
					</view>
				</view>
				<view class="form-item" v-if="!ischeck">
					<view class="form-label" style="padding: 20rpx 0;">
						流程：
					</view>
					<view class="flow-wrap">
						<view class="flow-item yf-flex-left">
							<view class="flow-left yf-flex-vertical">
								<view class="flow-left-dot" :class="[`flow-left-dot${formData.status}`]"></view>
							</view>
							<view class="flow-center">
								<view class="flow-center-title">审批人</view>
							</view>
							<view class="flow-info">
								<view class="flow-center-status" :class="[`flow-center-status${formData.status}`]">
									{{STATUS[formData.status]}}
								</view>
								<view class="flow-center-text" v-if="formData.status==2&&formData.reason">
									未通过原因：{{formData.reason||""}}
								</view>
								<view class="flow-center-date">
									{{formData.updateTime||""}}
								</view>
							</view>
							<view class="flow-right">
								<view class="user-info">
									<image
										:src="`${formData.approveUserNameHeadImg?imagePath+formData.approveUserNameHeadImg:'/static/common/head_img.png'}`"
										mode="aspectFill" class="user-img"></image>
									<view class="user-name">
										{{formData.approveUserName}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="yf-flex-left submitBt-wrap" v-if="types==0&&ischeck">
				<view class="yf-flex-center submitBtNo" @click="opendrawer">
					不通过
				</view>
				<view class="yf-flex-center submitBt" @click="formSubmit">通过</view>
			</view>
		</view>
		<tui-drawer mode="bottom" :visible="visible" @close="opendrawer">
			<view class="d-container">
				<view class="d-container-title">
					未通过原因
				</view>
				<textarea placeholder="请输入" class="textarea" v-model="desc"></textarea>
				<view @click="submitInput(2)" class="yf-flex-center submitBt">确认</view>
				<tui-icon name="shut" class="close" size="20" @click="opendrawer"></tui-icon>

				<!-- <tui-button height="80rpx" type="warning" shape="circle" @click="opendrawer">关闭抽屉</tui-button> -->
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	import {
		yearTime
	} from '@/common/util.js'
	import {
		mapState
	} from "vuex"
	const STATUS = ['待审核', '已通过', '未通过']
	export default {
		data() {
			return {
				STATUS,
				dateType: 1, //1开始时间2结束时间
				flowArr: [1, 2, 3],
				types: 0, //0审批查看1我的审批查看
				ischeck: false, //是否是审核
				formData: {}, //审批信息
				visible: false, //拒绝审批抽屉
				desc: "", //拒绝审批理由
			};
		},
		onLoad(options) {
			console.log(options, "options")
			this.types = options.types;
			this.formData = JSON.parse(decodeURIComponent(options.info));
			console.log(this.formData)
			if (this.types == 0 && this.formData.status == 0) {
				uni.setNavigationBarTitle({
					title: '审核'
				})
				this.ischeck = true;
			}
		},
		computed: {
			...mapState(['imagePath'])
		},
		methods: {
			// 点击图片
			bindImg() {
				if (this.formData.img) { 
					uni.previewImage({
						urls: [this.imagePath+this.formData.img],
						current: 0
					})
				}
			},
			// 打开关闭抽屉
			opendrawer() {
				this.visible = !this.visible
			},
			// 通过
			formSubmit: function() {
				uni.showModal({
					title: '审批',
					content: '是否确认通过？',
					confirmColor: "#3291F8",
					success: (res) => {
						if (res.confirm) {
							this.submitInput(1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 审批
			submitInput(status) {
				this.$api.showLoading()
				//验证通过！
				this.$apis.approve({
					desc: this.desc,
					id: this.formData.id,
					status: status, //1通过 
				}).then((res) => {
					this.$api.hideLoading()
					console.log(res, '@@@@@@@@')
					if (res.code == 0) {
						this.formData.status = status;
						this.formData.updateTime = yearTime('yearTime');
						if(status==2&&this.desc){
							this.formData.reason = this.desc; 
						} 
						this.ischeck = false;
						this.visible = false;
						uni.$emit('updateList');
						this.$api.msg("审批成功~")
					} else {
						this.$api.msg(res.msg)
					}
				}).catch(() => {
					setTimeout(()=>{
						this.$api.hideLoading()
					},1500)
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F8FB;
	}

	.top-bg {
		background: #3291F8;
		width: 100%;
		height: 200rpx;
	}

	.content-wrap {
		padding: 0 30rpx 30rpx;
		margin-top: -168rpx;
		width: 100%;

		.form-wrap {
			border-radius: 20rpx;
			background: #fff;
			padding: 22rpx 18rpx 22rpx;
			box-shadow: 0px 2rpx 6rpx 0px rgba(180, 180, 180, 40);

			.form-item {
				border-bottom: 1rpx solid #c9c9c9;
				min-height: 107rpx;
				padding: 0 24rpx;

				.form-label {
					font-size: 12+24rpx;
					width: 200rpx;

					text {
						color: #FF0000;
					}
				}

				.uni-input {
					flex: 1;
					font-size: 12+24rpx;

					.uploadImg {
						width: 208rpx;
						height: 120rpx;
					}
				}

				.flow-wrap {
					.flow-item {
						.flow-left {
							align-items: center;
							justify-content: center;
							margin-right: 15rpx;

							.flow-left-dot {
								width: 20rpx;
								height: 20rpx;
								border-radius: 50%;
								border: 4rpx solid #9B9B9B;
							}

							.flow-left-dot1 {
								border-color: #3291F8;
							}

							.flow-left-dot2 {
								border-color: #FF0000;
							}
						}

						.flow-center {
							flex: 1;

							.flow-center-title {
								font-size: 12+24rpx;
								color: #000;
							}

							.flow-center-text {
								font-size: 12+20rpx;
								color: #7b7b7b;
								margin-top: 10rpx;
							}
						}

						.flow-info {
							text-align: right;

							.flow-center-status {
								color: #9B9B9B;
								font-size: 12+24rpx;
							}

							.flow-center-status1 {
								color: #3291F8;
							}

							.flow-center-status2 {
								color: #FF0000;
							}

							.flow-center-text {
								color: #FF0000;
								font-size: 12+24rpx;
								max-width: 390rpx;
							}

							.flow-center-date {
								font-size: 12+20rpx;
								color: #7B7B7B;
							}
						}

						.flow-right {
							.user-info {
								padding: 0 0 0 20rpx;

								.user-img {
									width: 50rpx;
									height: 50rpx;
									margin: 0 auto;
								}

								.user-name {
									text-align: center;
									font-size: 12+24rpx;
									margin-right: 10rpx;
									color: #777777;
								}
							}
						}
					}
				}
			}

			.form-item:last-child {
				border: none
			}

		}

		.submitBt-wrap {
			margin-top: 26rpx;
			width: 100%;

			.submitBtNo {

				width: 254rpx;
				height: 80rpx;
				border-radius: 50rpx;
				color: #fff;
				background: #F87D32;
				font-size: 12+24rpx;
				margin-right: 23rpx;
			}

			.submitBt {
				width: 414rpx;
				height: 80rpx;
				border-radius: 50rpx;
				color: #fff;
				background: #3291F8;
				font-size: 12+24rpx;
			}
		}

	}

	.d-container {
		width: 100%;
		height: 410rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 60rpx 40rpx 40rpx;
		position: relative;

		.d-container-title {
			font-size: 12+26rpx;
			color: #101010;
			font-weight: bold;
		}

		.textarea {
			width: 100%;
			border-radius: 20rpx;
			border: 1rpx solid rgba(187, 187, 187, 1);
			padding: 10rpx;
			font-size: 12+24rpx;
			margin: 28rpx auto;
			height: 126rpx;
		}

		.submitBt {
			width: 100%;
			height: 80rpx;
			border-radius: 50rpx;
			color: #fff;
			background: #3291F8;
			font-size: 12+24rpx;
		}

		.close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
	}
</style>